<template>
  <div>
     <el-page-header  content="分包合同">
       </el-page-header>
            <el-divider></el-divider>
    <div>
        <span>基本信息</span>
        <el-divider></el-divider>
        <el-form ref="form" :model="subcontracts"  style="width: 100%;" label-width="100px">
            <el-input v-model="subcontracts.i" hidden="" ></el-input>
          <el-container>
  <el-form-item label="日期">
    <el-input v-model="subcontracts.createDate" type="date" readonly style="width: 280px;"></el-input>
  </el-form-item>
  <el-form-item label="合同编号">
    <el-input v-model="subcontracts.id" readonly style="width: 280px;"></el-input>
  </el-form-item>
  <el-form-item label="合同名称">
    <el-input v-model="subcontracts.contractName"  readonly style="width: 660px;"></el-input>
  </el-form-item>
  </el-container>
  <el-container>
  <el-form-item label="合同类型" >
      <el-input v-model="subcontracts.contractType" readonly style="width: 280px;"></el-input>
    </el-form-item>
    <el-form-item label="合同金额">
    <el-input v-model="subcontracts.contractAmount" readonly type="number"   style="width: 280px;"></el-input>
  </el-form-item>
  <el-form-item label="金额大写">
    <el-input v-model="subcontracts.amountUpper"  readonly style="width: 280px;"></el-input>
  </el-form-item>
  <el-form-item label="结算方式">
      <el-input v-model="subcontracts.settleType" readonly style="width: 280px;"></el-input>
    </el-form-item>
    </el-container>
    <el-container>
  <el-form-item label="开始日期">
    <el-input v-model="subcontracts.startDate" readonly type="date"  style="width: 280px;"></el-input>
  </el-form-item>
  <el-form-item label="结束日期">
    <el-input v-model="subcontracts.endDate" readonly type="date"  style="width: 280px;"></el-input>
  </el-form-item>
  <el-form-item label="项目名称">
    <el-input v-model="subcontracts.projectName" readonly style="width: 280px;"></el-input>
                        <el-input v-model="subcontracts.pId" v-show="false"></el-input>
  </el-form-item>
  <el-form-item label="分包单位">
    <el-input v-model="subcontracts.providerName" readonly style="width: 280px;"></el-input>
                        <el-input v-model="subcontracts.proId" v-show="false"></el-input>
  </el-form-item>
  </el-container>
  <el-container>
  <el-form-item label="预付款">
    <el-input v-model="subcontracts.advancePay" readonly type="number"  style="width: 280px;"></el-input>
  </el-form-item>
  <el-form-item label="保证金">
    <el-input v-model="subcontracts.depositAmount" readonly type="number"  style="width: 280px;"></el-input>
  </el-form-item>
  <el-form-item label="付款方式">
      <el-input v-model="subcontracts.paymentType" readonly style="width: 280px;"></el-input>
  </el-form-item>
  <el-form-item label="签订人">
    <el-input v-model="subcontracts.name" readonly style="width: 280px;" ></el-input>
                        <el-input v-model="subcontracts.eId" v-show="false"></el-input>
  </el-form-item>
  </el-container>
  <el-form-item label="付款条件">
    <el-input v-model="subcontracts.payCondition" readonly type="textarea" style="width: 1420px;"></el-input>
  </el-form-item>
  <el-form-item label="主要条款">
    <el-input v-model="subcontracts.mainTerm" readonly type="textarea" style="width: 1420px;"></el-input>
  </el-form-item>
  <el-form-item label="备注">
    <el-input v-model="subcontracts.comment" readonly type="textarea" style="width: 1420px;"></el-input>
  </el-form-item>
</el-form>
    </div>
      <multi-file-upload
                style="width: 90%;margin: 20px auto"
                title="附件"
                action="http://localhost/uploads"
                :params="{folder: 'subcontract'}"
                :headers="{token: token}"
                :show-button="!checkRoute"
                @uploadSuccess="handleUploadSuccess"
                :parent-file-list="fileList"
        ></multi-file-upload>
    <br>
    <div>
      <el-container>
      <span>工程量清单</span>
      <el-button style="margin-left: 10px;" size="small" type="primary" @click="handleAddRow">增加一行</el-button>
      </el-container>
        <el-divider></el-divider>
        <el-table :data="tenderPurchaseDetails">
                    <el-table-column prop="index" v-if="false"></el-table-column>
                    <el-table-column label="" >
                    <template slot-scope="scope">
                            <el-input v-model="scope.row.id" hidden=""></el-input>
                        </template>
                        </el-table-column>
                    <el-table-column label="施工内容" prop="subList">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.subList" ></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="单位" prop="unit">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.unit" ></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="工程量" prop="workCount">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.workCount" type="number" ></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="综合单价" prop="comperPrice">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.comprePrice" @blur="sums(scope.row)" type="number"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="合价" prop="sumPrice">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.sumPrice"  type="number"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button  type="danger" @click="handleRemoveRow(scope.row)">删行</el-button>
                        </template>
                    </el-table-column>
                </el-table>
    </div>
    <el-divider></el-divider>
        <div style="width: 100%;margin-left: 90px">
            <el-button type="primary" @click="updateSubcontractTo"  >确认提交</el-button>
        </div>

  </div>
</template>

<script>
// import SubcontractModel from '../../model/wyh/subcontractModel.js'
// const em=new  SubcontractModel()
export default {
    props:['subcontract',"quantitiesList"],
    data() {
        return {
            subcontracts:JSON.parse(JSON.stringify(this.subcontract)),//分包合同数据
            fileList:[],
            tenderPurchaseDetails:JSON.parse(JSON.stringify(this.quantitiesList)),
        }
    },
    computed: {
            token: {
                get() {
                    return this.$store.state.token
                }
            },
            checkRoute(){
                return Object.keys(this.$route.params).length != 0
            }
        },
    methods:{
      handleUploadSuccess(ids){
                this.subcontracts.attachIds = ids
            },
      
      //添加一行
            handleAddRow() {
                this.tenderPurchaseDetails.push({
                    index: '',
                    subList: '',
                    unit: '',
                    workCount: '',
                    comperPrice: '',
                    sumPrice: '',
                })
            },
            //删行
            handleRemoveRow(row) {
                this.tenderPurchaseDetails.splice(row.index, 1)
            },
    
    sums(row){
      if(row.workCount=='' || row.comprePrice==''){
        row.sumPrice=0
      }else{
        row.sumPrice=(row.workCount*row.comprePrice)
      }
    },
        updateSubcontractTo(){
            var a = {}
        a.subcontracts=this.subcontracts
        a.tenderPurchaseDetails=this.tenderPurchaseDetails
            this.$emit('updateSubcontractTo',a)
    },
    },
    created(){
    }
}
</script>

<style>

</style>